<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apple</title>
    <link rel="stylesheet" href="../public/css/tailwind.css" />
    <link rel="stylesheet" href="./css/nav.css" />
  </head>
  <body>
    <!-- topnav -->
    <nav id="topnav">
      <input type="checkbox" id="toggle" />

      <div class="tn-btns">
        <label for="toggle">
          <div class="tn-btn tg-btn">
            <span></span>
            <span></span>
          </div>
        </label>

        <div class="tn-btn">
          <img src="./imgs/logo.png" class="logo" alt="" />
        </div>

        <div class="tn-btn"></div>
      </div>

      <div class="tn-list">
        <div class="tn-item">
          <a href="#" class="tn-link">商店</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Mac</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">iPad</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">iPhone</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Watch</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">AirPods</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">家居</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">商店</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Apple 独家</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">配件</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">技术支持</a>
        </div>
      </div>
    </nav>

    <!-- js -->
    <script>
      // 移除窗口变移动端时，下拉导航出现动画过渡的效果
      window.addEventListener('resize', () => {
        let tnList = document.querySelector('.tn-list')
        tnList.style.transition = 'none'

        setTimeout(() => {
          tnList.style.transition = ''
        }, 100)
      })
    </script>
  </body>
</html>
